<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>博客列表</title>
		<link rel="stylesheet" href="css/list.css">
		<link rel="stylesheet" href="css/blog_list.css">
		<style>
			.nav{
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				height: 50px;
			}
			.container{
				padding-top: 80px;
				height: auto;
			}
			.container-right{
				width: auto;
			}
			.blog-pagnation-wrapper{
				height: 40px;
				margin: 16px 0;
				text-align: center;
			}
			.blog-pagnation-item{
				display: inline-block;
				padding: 8px;
				border: 1px solid #d0d0d5;
				color: #333;
			}
			.blog-pagnation-item:hover{
				background: #4e4eeb;
				color: #fff;
			}
			.blog-pagnation-item.actvie{
				background: #4e4eeb;
				color: #fff;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script src="js/urlutils.js"></script>
		<script src="js/logout.js"></script>
	</head>
	<body>
		<div class="nav">
			<img src="img/logo2.jpg" alt="">
			<span class="title">我的博客系统</span>
			<span class="spacer"></span>
			<a href="myblog_list.html">我的博客</a>
			<a href="blog_add.html">写博客</a>
			<a href="javascript:logout()">注销</a>
		</div>
		<div class="container">
			<div class="container-right" style="width: 100%;">
				<div id="artListDiv"></div>
				<hr>
				<div class="blog-pagnation-wrapper">
					<button class="blog-pagnation-item" onclick="dofirst()">首页</button> 
					<button class="blog-pagnation-item" onclick="doprevious()">上一页</button>  
					<button class="blog-pagnation-item" onclick="donext()">下一页</button>
					<button class="blog-pagnation-item" onclick="dolast()">末页</button>
					&nbsp;&nbsp;&nbsp;&nbsp;
					当前第 <span id="pindex"></span> 页，共 <span id="psize"></span> 页
				</div>
			</div>
		</div>
		<script>
			var pindex=1;
			var psize=2;
			var totalpage=1;
			function init(){
				pindex=getParamValue("pindex");
				if(pindex==null){
					pindex=1;
				}
				psize=getParamValue("psize");
				if(psize==null){
					psize=2;
				}
				jQuery("#pindex").html(pindex);
				jQuery.ajax({
					url:"/art/getlists",
					type:"GET",
					data:{
						"pindex":pindex,
						"psize":psize
					},
					success:function(res){
						if(res.data!=null&&res.code==200){
							var createhtml="";
							if(res.data.list!=null&&res.data.list.length>0){
								totalpage=res.data.size;
								jQuery("#psize").html(totalpage);
								var artlist=res.data.list;
								for(var i=0;i<artlist.length;i++){
									var art=artlist[i];
									createhtml+='<div class="blog" >';
									createhtml+='<div class="title">'+art.title+'</div>';
									createhtml+='<div class="date">'+art.createtime+'</div>';
									createhtml+='<div class="desc">'+art.content+'</div>';
									createhtml+='<a href="blog_content.html?id='+art.id+'" class="detail">查看全文 &gt;&gt;</a>';
									createhtml+='</div>';
								}
							}else{
								createhtml+="<h3 style='margin-left:20px,margin-top:20px'>暂无文章</h3>";
							}
							jQuery("#artListDiv").html(createhtml);
						}else{
							alert("操作失败："+res.msg);
						}
					}
				});
			}
			init();
			
			function dofirst(){
				if(pindex<=1){
					alert("已在首页，无需跳转");
					return false;
				}
				location.href="blog_list.html";
			}
			
			function dolast(){
				if(pindex>=totalpage){
					alert("已在末页，无需跳转");
					return false;
				}
				location.href="blog_list.html?pindex="+totalpage;
			}
			function donext(){
				if(pindex>=totalpage){
					alert("已在末页，无需跳转");
					return false;
				}
				location.href="blog_list.html?pindex="+(parseInt(pindex)+1);
			}
			
			function doprevious(){
				if(pindex<=1){
					alert("已在首页，无需跳转");
					return false;
				}
				location.href="blog_list.html?pindex="+(parseInt(pindex)-1);
			}
		</script>
	</body>
</html>